<template>
  <div style="height: 100%" class="index-list-edit-containar moduleedit">
    <el-row style="background: #fff; width: 100%">
      <el-col :span="24" class="content_title clearfix">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12" class="tr">
          <p style="margin-right: 40px">
            <span class="edit-box-btn" @click="editIndexBox">
              <i class="el-icon-edit"></i>
              <span>保存</span>
            </span>
          </p>
        </el-col>
      </el-col>
    </el-row>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="[]" class="index-list-edit-box-menu">
          <template v-if="$route.query.id == 5">
            <!-- <div class="module_top_types">
              <p>顶部类型：</p>
              <el-switch
                :width="80"
                :value="pageObj.tuanzhang"
                active-color="#13ce66"
                @change="updateInputNew($event, 'tuanzhang')"
                active-text="定位"
                inactive-text="正常"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </div> -->
            <el-menu-item index="99" @click="tabclick('slides', 0, '')">
              <i class="el-icon-s-tools"></i>
              <span slot="title">基础设置</span>
            </el-menu-item>
          </template>
          <template v-else>
            <el-menu-item index="99" @click="tabclick('top', 0, '')">
              <i class="el-icon-s-tools"></i>
              <span slot="title">基础设置</span>
            </el-menu-item>

            <el-menu-item index="97" @click="tabclick('slides', 0, '')">
              <i class="el-icon-s-finance"></i>
              <span slot="title">顶部幻灯片</span>
            </el-menu-item>
          </template>

          <el-menu-item index="96" @click="tabclick('menu', 0, '')">
            <i class="el-icon-s-data"></i>
            <span slot="title">导航栏</span>
          </el-menu-item>

          <el-menu-item index="95" @click="tabclick('text', 0, '', '文本')"
            :disabled="$store.state.modulePage.active == '' ? false : true" v-if="$route.query.id != 5">
            <i class="el-icon-edit"></i>
            <span slot="title">文本</span>
          </el-menu-item>

          <el-menu-item index="94" @click="tabclick('news', 0, '', '资讯')"
            :disabled="$store.state.modulePage.active == '' ? false : true" v-if="$route.query.id != 5">
            <i class="el-icon-document"></i>
            <span slot="title">资讯</span>
          </el-menu-item>

          <!-- <el-menu-item
            index="93"
            @click="tabclick('spike', 0, '', '秒杀商品')"
            :disabled="$store.state.modulePage.active == '' ? false : true"
            v-if="
              $store.state.plugin.xsth &&
              $store.state.plugin.xsth.is_open == 1 &&
              $route.query.id != 5
            "
          >
            <i class="el-icon-s-promotion"></i>
            <span slot="title">秒杀商品</span>
          </el-menu-item> -->

          <el-menu-item index="92" @click="tabclick('banner', 0, '', '广告')"
            :disabled="$store.state.modulePage.active == '' ? false : true">
            <i class="el-icon-menu"></i>
            <span slot="title">广告</span>
          </el-menu-item>

          <el-menu-item index="91" @click="tabclick('product', 0, '', '商品')"
            :disabled="$store.state.modulePage.active == '' ? false : true" >
            <i class="el-icon-s-goods"></i>
            <span slot="title">商品</span>
          </el-menu-item>

          <el-menu-item index="90" @click="tabclick('supplier', 0, '', '商户')"
            :disabled="$store.state.modulePage.active == '' ? false : true"
            v-if="$store.state.plugin.shbxt && $store.state.plugin.shbxt.is_open == 1 && $route.query.id != 5">
            <i class="el-icon-s-custom"></i>
            <span slot="title">商户</span>
          </el-menu-item>

          <!-- <el-menu-item
            index="88"
            @click="tabclick('cityinfo', 0, '', '分类信息')"
            :disabled="$store.state.modulePage.active == '' ? false : true"
            v-if="
              $store.state.plugin.flxx &&
              $store.state.plugin.flxx.is_open == 1 &&
              $route.query.id != 5
            "
          >
            <i class="el-icon-s-custom"></i>
            <span slot="title">分类信息</span>
          </el-menu-item> -->

          <!-- <el-menu-item
            index="88"
            @click="tabclick('task', 0, '', '任务电商')"
            :disabled="$store.state.modulePage.active == '' ? false : true"
            v-if="
              $store.state.plugin.rwds &&
              $store.state.plugin.rwds.is_open == 1 &&
              $route.query.id != 5
            "
          >
            <i class="el-icon-s-custom"></i>
            <span slot="title">任务电商</span>
          </el-menu-item> -->

          <!-- <el-menu-item
            index="87"
            @click="tabclick('hotel', 0, '', '酒店信息')"
            :disabled="$store.state.modulePage.active == '' ? false : true"
            v-if="
              $store.state.plugin.hotel &&
              $store.state.plugin.hotel.is_open == 1 &&
              $route.query.id != 5
            "
          >
            <i class="el-icon-cold-drink"></i>
            <span slot="title">推荐自营酒店</span>
          </el-menu-item> -->

          <!-- <el-menu-item
            index="85"
            @click="tabclick('plane', 0, '', '机票搜索')"
            :disabled="$store.state.modulePage.active == '' ? false : true"
            v-if="
              $store.state.plugin.gnjp &&
              $store.state.plugin.gnjp.is_open == 1 &&
              $route.query.id != 5
            "
          >
            <i class="el-icon-sunny"></i>
            <span slot="title">机票搜索</span>
          </el-menu-item> -->

          <!-- <el-menu-item
            index="84"
            @click="tabclick('dfy_hotel', 0, '', '酒店搜索')"
            :disabled="$store.state.modulePage.active == '' ? false : true"
            v-if="
              $store.state.plugin.skjd &&
              $store.state.plugin.skjd.is_open == 1 &&
              $route.query.id != 5
            "
          >
            <i class="el-icon-sunny"></i>
            <span slot="title">酒店搜索</span>
          </el-menu-item> -->

          <!-- <el-menu-item
            index="89"
            @click="tabclick('footer', 0, '')"
            v-if="$route.query.id != 5"
          >
            <i class="el-icon-s-flag"></i>
            <span slot="title">页脚导航</span>
          </el-menu-item> -->

          <!-- <el-menu-item :index="1 + i + ''" v-for="(item, i) in modules" :disabled="$store.state.modulePage.active == '' ? false : true"
              @click="tabclick(item.types, i, item.title)" :key="i">
            <span slot="title">{{ item.title }}</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>
      <el-container>
        <el-main style="width: 60%">
          <modulecenter ref="modulecenter"></modulecenter>
        </el-main>
        <el-main style="width: 40%" class="bg_write">
          <moduleright></moduleright>
        </el-main>
      </el-container>
    </el-container>
    <preview :show="dia_show" :info="sel_item" @closedia="dia_show = false"></preview>
  </div>
</template>

<script>
import modulecenter from "@/components/page/module/modulecenter";
import moduleright from "@/components/page/module/moduleright";

import HeadTitle from "@/components/currency/HeadTitle.vue";
import { mapState } from "vuex";
import { Loading } from "element-ui";
import html2canvas from "html2canvas";
import preview from "@/components/page/index/index-list/index-list-item/preview.vue";
export default {
  data() {
    return {
      urlHeader: "",
      sel_item: {},
      dia_show: false,
      modules: [],
    };
  },
  computed: {
    ...mapState({
      pageObj: (state) => state.modulePage.moduledata,
      plugin: (state) => state.plugin,
    }),
    isShowSeckill() {
      //秒杀插件
      var bool = false;
      for (var i in this.plugin) {
        if (this.plugin[i].iden == "xsth" && this.plugin[i].is_open == "1") {
          bool = true;
          break;
        }
      }
      return bool;
    },
    isShowMerchant() {
      //多商户
      var bool = false;
      for (var i in this.plugin) {
        if (this.plugin[i].iden == "shbxt" && this.plugin[i].is_open == "1") {
          bool = true;
          break;
        }
      }
      return bool;
    },
    isShowpresale() {
      //预售
      var bool = false;
      for (var i in this.plugin) {
        if (this.plugin[i].iden == "xsmk" && this.plugin[i].is_open == "1") {
          bool = true;
          break;
        }
      }
      return bool;
    },
    isShowCourse() {
      //知识付费
      var bool = false;
      for (var i in this.plugin) {
        if (this.plugin[i].iden == "nyffxt" && this.plugin[i].is_open == "1") {
          bool = true;
          break;
        }
      }
      return bool;
    },
    isShowCollage() {
      //拼团
      var bool = false;
      for (var i in this.plugin) {
        if (this.plugin[i].iden == "ptgw" && this.plugin[i].is_open == "1") {
          bool = true;
          break;
        }
      }
      return bool;
    },
  },
  components: {
    modulecenter,
    moduleright,
    HeadTitle,
    preview,
  },
  created() {
    this.$store.dispatch("getPlugin");
    this.$store.dispatch("getModule", { id: this.$route.query.id });
    if (this.$route.query.id == 5) {
      this.$store.commit("setActive", "slides");
    } else {
      this.$store.commit("setActive", "top");
    }
    this.getIndexModules();
    this.geturlheader();
  },
  mounted() { },
  methods: {
    updateInputNew(e, type) {
      this.$store.commit("setActive", "slides");
      this.$store.commit("setbaseedit", { label: type, val: e });
      if (e == 1) {
        this.$store.commit("setbaseedit", { label: "background", val: "https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/resource/image/default/202211/b831e6bcda36491b8e6f09e534b55774.png" });
      } else {
        this.$store.commit("setbaseedit", { label: "background", val: "https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/resource/image/default/202211/40ba7eb96604b2bfae1308be82fc2b3f.png" });
      }
    },
    geturlheader() {
      this.$api.getSettings.getSettingsList({ cate: "wx" }).then((res) => {
        if (res.data.code == 200 && res.data.status == 1) {
          res.data.result.forEach((item) => {
            if (item.title == "手机端网址") {
              this.urlHeader = item.value;
            }
          });
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    //保存
    editIndexBox() {
      let loadingInstance = Loading.service({
        fullscreen: true,
        text: "提交中，请稍候",
        background: "rgba(0, 0, 0, 0.8)",
      });
      var htmlCanvas = this.$refs.modulecenter.$refs.htmlCanvas;
      var img;

      this.$nextTick(() => {
        setTimeout(() => {
          html2canvas(htmlCanvas, {
            useCORS: true,
            logging: true,
            allowTaint: false,
            height: 750,
          }).then((canvas) => {
            // 转成图片，生成图片地址
            img = canvas.toDataURL("image/png");
            console.log(img);
            this.$fnc.imgUploadBase64(img, (pic) => {
              //处理数据
              var params = {};
              try {
                params = JSON.parse(JSON.stringify(this.$store.state.modulePage.moduledata));
              } catch (error) { }

              var module = this.$store.state.modulePage.data;
              var allbanner = this.$store.state.modulePage.allbanner;

              var arr = [];
              for (const key in module) {
                if (module.hasOwnProperty(key)) {
                  const element = module[key];
                  arr.push(element);
                }
              }
              //广告添加
              arr = [...arr, ...allbanner];

              //广告排序
              arr.forEach((item, i) => {
                item.sort = i + 1;
                var text = "";
                item.banner.forEach((ban, k) => {
                  if (ban) {
                    ban.sort = k + 1;
                    text = text + ban.id + "@";
                  }
                });
                if (item.types == "product" && item.links == "together") {
                  //如果是拼购商品，text额外传1
                  item.text = "1";
                } else if (item.types == "product") {
                  item.text = text;
                }
              });

              //如果是商品 banner里的数据去掉
              allbanner.forEach((item, i) => {
                if (item.types == "product" || item.types == "spike") {
                  item.banner = [];
                }
              });
              params.module = JSON.stringify(arr);

              params.id = this.$route.query.id;
              params.del_module = this.$store.state.modulePage.delMudeules;
              params.del_banner = this.$store.state.modulePage.delBanners;
              params.del_footer_banner = this.$store.state.modulePage.del_footer_banner;
              params.piclink = pic;
              var footer = JSON.stringify(this.$store.state.modulePage.moduledata.footer);
              params.footer = footer;
              this.$api.getPage.editPageIndexListItem(params).then((res) => {
                if (res.data.code == 200) {
                  loadingInstance.close();
                  this.$message({
                    message: "提交成功",
                    type: "success",
                  });
                  if (this.$route.query.id != 5) {
                    this.sel_item.iframeurl = this.urlHeader + "/pages/sub/theme/theme?iden=" + this.$store.state.modulePage.moduledata.iden;
                  } else {
                    this.sel_item.iframeurl = this.urlHeader + "/pages/home/index/index";
                  }

                  this.sel_item.title = this.$store.state.modulePage.moduledata.title;
                  this.dia_show = true;
                  this.$store.dispatch("getModule", {
                    id: this.$route.query.id,
                  });
                } else {
                  loadingInstance.close();
                  this.$fnc.alertError(res.data.result);
                }
              });
            });
            // console.log(img);
          });
        }, 500);
      });
    },

    tabclick(types) {
      if ((types == "top" || types == "slides" || types == "menu") && this.$refs.modulecenter) {
        this.$refs.modulecenter.scroolTopORBottom(0);
      } else if (types == "footer" && this.$refs.modulecenter) {
        this.$refs.modulecenter.scroolTopORBottom(1);
      }
      if (types == "headericon") {
        types = "top";
      }
      this.$store.commit("setActive", types);
    },
    toActiveModules(types, i, title) {
      switch (true) {
        case types == "slides":
          this.$store.commit("showModeules", "slides");
          break;
        default:
          this.$store.commit("addNewModules", { types, i, title });
          break;
      }
    },
    getIndexModules() {
      this.$api.getPage.getIndexModules({}).then((res) => {
        if (res.data.code == 200) {
          // nav: "导航"
          // group: "拼团"
          // knowledge: "知识付费"
          // news: "资讯"
          // presale: "预售商品"
          // product: "商品"
          // slides: "幻灯片"
          // spike: "秒杀商品"
          // supplier: "商户列表"
          // tour: "旅游商品"
          // text: "文本"
          // banner: "广告"
          var arr = [];
          var result = res.data.result;
          for (var i in result) {
            var obj = {};
            obj.types = i;
            obj.title = result[i];
            arr.push(obj);
          }
          this.modules = arr;
          // console.log(arr);
        }
      });
    },
    toActive(type) {
      this.$store.commit("toActive", type);
      if (type == "advertisement") {
        this.$store.commit("addAdvertisementArr");
      }
      if (type == "menu" || type == "shop" || type == "collage" || type == "news" || type == "course" || type == "presale" || type == "seckill" || type == "merchant") {
        var str = "";
        if (str == "menu") {
          str = "menuList";
        } else {
          str = type;
        }
        this.$store.commit("showModeules", str);
      }
      if (type == "carousel") {
        this.$store.commit("showModeules", "carousel");
      }
    },
  },
  watch: {
    $route(newval, oldval) {
      this.$store.dispatch("getModule", { id: this.$route.query.id });
      this.$store.commit("setActive", "top");
      this.getIndexModules();
      this.geturlheader();
    },
  },
};
</script>

<style scoped lang="less">
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.module_top_types {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #f3f3f3;

  >p {
    font-size: 14px;
  }
}</style>
